<template>
    <div class="DashBoardBox" v-loading="loading">
        <div class="headBar">
            <el-row :gutter=20>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <template #header>
                            <div class="littleTitle">
                                <el-icon>
                                    <Pointer />
                                </el-icon>
                                <span>总访问量</span>
                            </div>
                        </template>
                        <span class="Value">{{ this.titleValue.totalVisits }}</span>
                        <div class="littleContent">
                            <el-radio-group v-model="graphChoose" size="large">
                                <el-radio-button label="总访问量" @change="handleRadioChange()" />
                            </el-radio-group>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <template #header>
                            <div class="littleTitle">
                                <el-icon>
                                    <View />
                                </el-icon>
                                <span>当日访问</span>
                            </div>
                        </template>
                        <span class="Value">{{ this.titleValue.dailyVisits }}</span>
                        <div class="littleContent">
                            <el-radio-group v-model="graphChoose" size="large">
                                <el-radio-button label="当日访问" @change="handleRadioChange()" />
                            </el-radio-group>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <template #header>
                            <div class="littleTitle">
                                <el-icon>
                                    <EditPen />
                                </el-icon>
                                <span>文章数</span>
                            </div>
                        </template>
                        <span class="Value">{{ this.titleValue.articleNum }}</span>
                        <div class="littleContent">
                            <el-radio-group v-model="graphChoose" size="large">
                                <el-radio-button label="文章数" @change="handleRadioChange()" />
                            </el-radio-group>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <template #header>
                            <div class="littleTitle">
                                <el-icon>
                                    <ChatDotSquare />
                                </el-icon>
                                <span>评论数</span>
                            </div>
                        </template>
                        <span class="Value">{{ this.titleValue.commentNum }}</span>
                        <div class="littleContent">
                            <el-radio-group v-model="graphChoose" size="large">
                                <el-radio-button label="评论数" @change="handleRadioChange()" />
                            </el-radio-group>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter=20>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <template #header>
                            <div class="littleTitle">
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>用户数</span>
                            </div>
                        </template>
                        <span class="Value">{{ this.titleValue.userNum }}</span>
                        <div class="littleContent">
                            <el-radio-group v-model="graphChoose" size="large">
                                <el-radio-button label="用户数" @change="handleRadioChange()" />
                            </el-radio-group>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <template #header>
                            <div class="littleTitle">
                                <el-icon>
                                    <Goods />
                                </el-icon>
                                <span>商品数</span>
                            </div>
                        </template>
                        <span class="Value">{{ this.titleValue.itemNum }}</span>
                        <div class="littleContent">
                            <el-radio-group v-model="graphChoose" size="large">
                                <el-radio-button label="商品数" @change="handleRadioChange()" />
                            </el-radio-group>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <template #header>
                            <div class="littleTitle">
                                <el-icon>
                                    <Van />
                                </el-icon>
                                <span>订单数</span>
                            </div>
                        </template>
                        <span class="Value">{{ this.titleValue.orderNum }}</span>
                        <div class="littleContent">
                            <el-radio-group v-model="graphChoose" size="large">
                                <el-radio-button label="订单数" @change="handleRadioChange()" />
                            </el-radio-group>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <template #header>
                            <div class="littleTitle">
                                <el-icon>
                                    <Picture />
                                </el-icon>
                                <span>百科数</span>
                            </div>
                        </template>
                        <span class="Value">{{ this.titleValue.knowledgeNum }}</span>
                        <div class="littleContent">
                            <el-radio-group v-model="graphChoose" size="large">
                                <el-radio-button label="百科数" @change="handleRadioChange()" />
                            </el-radio-group>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

        </div>
        <div class="chartsBox">
            <el-card shadow="hover">
                <div ref="chartColumn" style="width:100%; height:400px;"></div>
            </el-card>
        </div>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
import { getArticleTotalCount, getAllArticleData } from '@/api/article';
import { getCommentTotalCount, getAllCommentData } from '@/api/comment';
import { getFlowerKnowledgeTotalCount, getAllFlowerKnowledgeData } from '@/api/flowerKnowledge';
import { getItemTotalCount, getAllItemData } from '@/api/item';
import { getOrderTotalCount, getAllOrderData } from '@/api/order';
import { getFlowerUserTotalCount, getAllFlowerUserData } from '@/api/flowerUser';
import { getAllLoginInfoData } from '@/api/loginInfo'

export default {
    data() {
        this.chartColumn = null
        return {
            loading: false,
            graphChoose: "总访问量",    //单选框选择内容
            titleValue: {               //每块显示的数字
                totalVisits: 0,
                dailyVisits: 0,
                articleNum: 0,
                commentNum: 0,
                userNum: 0,
                itemNum: 0,
                orderNum: 0,
                knowledgeNum: 0,
            },
            data: null,
            dateList: null,
            valueList: null,
            option: {
                visualMap: {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 100,
                    color: ["#ff0015", "#fab6b6", "#337ecc"],
                },
                title: {
                    left: 'center',
                    text: '总访问量增加情况'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        type: 'line',
                        showSymbol: false,
                        data: [],
                        areaStyle: {}
                    }
                ]
            },
        }
    },
    methods: {
        getTitleData() {
            getAllLoginInfoData()
                .then((response) => {
                    this.titleValue.totalVisits = response.data.data.total
                    let allData = response.data.data
                    let dataSet = {}
                    allData.records.forEach(function (record) {
                        const newDateString = new Date(record.created).toISOString().substring(0, 10);
                        dataSet[newDateString] = (dataSet[newDateString] || 0) + 1;
                    });
                    const date = new Date()
                    const year = date.getFullYear()
                    const month = ('0' + (date.getMonth() + 1)).slice(-2)
                    const day = ('0' + date.getDate()).slice(-2)
                    let currentDate = `${year}-${month}-${day}`
                    this.titleValue.dailyVisits = dataSet[currentDate]

                })
                .catch((error) => {

                })
            getArticleTotalCount()
                .then((response) => {
                    this.titleValue.articleNum = response.data.data.total;
                })
                .catch((error) => {

                });
            getCommentTotalCount()
                .then((response) => {
                    this.titleValue.commentNum = response.data.data.total;
                })
                .catch((error) => {

                });
            getFlowerKnowledgeTotalCount()
                .then((response) => {
                    this.titleValue.knowledgeNum = response.data.data.total;
                })
                .catch((error) => {

                });
            getOrderTotalCount()
                .then((response) => {
                    this.titleValue.orderNum = response.data.data.total;
                })
                .catch((error) => {

                });
            getFlowerUserTotalCount()
                .then((response) => {
                    this.titleValue.userNum = response.data.data.total;
                })
                .catch((error) => {

                });
            getItemTotalCount()
                .then((response) => {
                    this.titleValue.itemNum = response.data.data.total;
                })
                .catch((error) => {

                });
        },
        handleRadioChange() {
            this.loading = true;
            this.getAllData(this.graphChoose).then((allData) => {
                if (this.graphChoose === "总访问量") {
                    this.data = this.formatChartDataAddUp(allData)
                }
                else {
                    this.data = this.formatChartData(allData)
                }
                const values = this.data.map(([date, value]) => value)
                this.option.visualMap.min = Math.min(...values)
                this.option.visualMap.max = Math.max(...values)*1.3
                this.initChart()
                this.loading = false
            }).catch((error) => {
                // 错误处理
                console.error(error)
            });
        },
        //根据当前的选择调用对应的getAllData方法
        getAllData(str) {
            switch (str) {
                case "总访问量":
                    return getAllLoginInfoData().then((response) => {
                        this.option.title.text = "总访问量增加情况"
                        return response.data.data
                    })
                    break;
                case "当日访问":
                    return getAllLoginInfoData().then((response) => {
                        this.option.title.text = "每日访问量情况"
                        return response.data.data
                    })
                    break;
                case "文章数":
                    return getAllArticleData().then((response) => {
                        this.option.title.text = "每日文章数新增情况"
                        return response.data.data;
                    });
                case "评论数":
                    return getAllCommentData().then((response) => {
                        this.option.title.text = "每日评论数新增情况"
                        return response.data.data;
                    });
                case "用户数":
                    return getAllFlowerUserData().then((response) => {
                        this.option.title.text = "每日用户数新增情况"
                        return response.data.data;
                    });
                case "商品数":
                    return getAllItemData().then((response) => {
                        this.option.title.text = "每日商品数新增情况"
                        return response.data.data;
                    });
                case "订单数":
                    return getAllOrderData().then((response) => {
                        this.option.title.text = "每日订单数新增情况"
                        return response.data.data;
                    });
                case "百科数":
                    return getAllFlowerKnowledgeData().then((response) => {
                        this.option.title.text = "每日百科数新增情况"
                        return response.data.data;
                    });
                default:
                    break;
            }
        },
        //处理图表数据
        formatChartData(allData) {
            let dataSet = {};
            allData.records.forEach(function (record) {
                const newDateString = new Date(record.created).toISOString().substring(0, 10);
                dataSet[newDateString] = (dataSet[newDateString] || 0) + 1;
            });
            const dataArr = Object.keys(dataSet).map(key => [key, dataSet[key]]);
            return dataArr;
        },
        //处理图标数据(总量统计型)
        formatChartDataAddUp(allData) {
            let dataSet = {};
            let sum = 0
            allData.records.forEach(function (record) {
                const newDateString = new Date(record.created).toISOString().substring(0, 10);
                sum = sum + 1
                dataSet[newDateString] = sum;
            });
            const dataArr = Object.keys(dataSet).map(key => [key, dataSet[key]]);
            return dataArr;
        },
        initChart() {
            this.dateList = this.data.map(function (item) {
                return item[0];
            });
            this.valueList = this.data.map(function (item) {
                return item[1];
            });
            this.option.xAxis.data = this.dateList;
            this.option.series[0].data = this.valueList;
            this.chartColumn.setOption(this.option);
        },
    },
    mounted: function () {
        this.getTitleData();
        this.chartColumn = echarts.init(this.$refs.chartColumn);
        this.handleRadioChange();
    }
}
</script>
<style scoped>
.el-row {
    margin-bottom: 20px;
}


.littleTitle span {
    font-size: 20px;
    font-weight: bold;
}

.Value {
    font-size: 40px;
    color: #79bbff;
    margin-left: 10%;
    margin-bottom: 20px;
}

.littleContent {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
  